<template>
	<view class='confirm-order bg-active-color'>
		<Lines></Lines>

		<!--地址-->
		<view class='order-map' @tap="goPathList">
			<template v-if="path">
				<view class='map-title'>
					<view class='map-name'>收件人：{{path.name}}</view>
					<view>{{path.tel}}</view>
				</view>
				<view class='map-city'>收货地址：{{path.province}}{{path.city}}{{path.district}}{{path.address}}</view>

			</template>
			<template v-else>
				<view class='map-name'>请选择地址</view>
			</template>
		</view>
		<!--商品-->
		<view class='goods-list'>
			<view class='goods-content bg-active-color' v-for="(item,index) in goodsList">
				<image class='goods-img' :src='item.imgUrl' mode=""></image>
				<view class='goods-text'>
					<view class='goods-name'>{{item.name}}</view>
					<view class='goods-size f-color'>颜色分类：黑色</view>
					<view class='f-active-color' style='font-size:24rpx'>7天无理由</view>
				</view>
				<view>
					<view>¥{{item.pprice*item.num}}</view>
					<view class='f-color'>*{{item.num}}</view>
				</view>
			</view>



		</view>
		<!--底部 : 提交订单-->
		<view class='order-foot'>
			<view class='total-price'>合计：<text class='f-active-color'>¥{{totalCount.pprice}}</text></view>
			<view class="confirm" @tap="goPayment">提交订单</view>
		</view>

	</view>
</template>

<script>
	import Lines from '@/components/common/Line.vue'
	import {
		mapGetters,mapState,mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				path: {}
			}
		},

	async	onLoad(e) {

			//选择的商品id集合
			this.item=JSON.parse(e.detail)
		
			//如果有默认地址的一个赋值
			try{
				let res=await this.$Request({
				url:"/api/selectAddress",
				method:"POST",
				header:{
					token:true
				}
			})

			// console.log(this.defaultPath,"默认地址");
			this.__initAddressList(res.data.data)	

			if (this.defaultPath.length) {

				this.path = this.defaultPath[0]
			}
			}catch(e){
				//TODO handle the exception
				console.log(e);
				uni.showToast({
					title:"出错"
				})
			}
		

			//自定义事件,my-path-list触发
			uni.$on("selectPathItem", (res) => {
			
				this.path = res
			})
		},
		onUnload() {
			uni.$off('selectPathItem', (res) => {
				console.log("移除自定义事件");
			})
		},
		components: {
			Lines
		},
		methods: {
				...mapMutations('path',['__initAddressList']),
			//跳转选择地址
			goPathList() {
				uni.navigateTo({
					url: '../my-path-list/my-path-list?type=selectedPath'
				})
			},
			//提交订单
		async	goPayment(){
				if(!this.path){
					return uni.showToast({
						title:"请选择收获地址",
						icon:'none'
					})
				}
				try{
					let res =await this.$Request({
						url:"/api/submitOrder",
						method:"POST",
						header:{
							token:true
						},
						data:{
							orderId:this.orderNumber,
							shopArr:this.selectedList
						}
					})
					if(res.data.data.data.success){
						
						let newName=[];
						this.goodsList.forEach(v=>{
							newName.push(v.name)
						})
						//选择支付
								uni.navigateTo({
					url:'../payment/payment/details='+JSON.stringify({pprice:this.totalCount.pprice,list:newName})
				})
					}
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title:"请求失败",
						icon:"none"
					})
				}
		
			}
		},
		computed: {
		
			...mapState({list:state=>state.cart.list}),
			...mapState({listpath:state=>state.path.list,
						orderNumber:state=>state.order.orderNumber,
						selectedList:state=>state.cart.selectedList
			}),
			...mapGetters('path', ['defaultPath']),
			...mapGetters(['totalCount']),
			goodsList(){
				return this.item.map(id=>{
					return this.list.find(v=>v.id==id)
				})
			}
		}
	}
</script>

<style scoped>
	.confirm-order {
		position: absolute;
		left: 0;
		top: 0;
		rigth: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}

	.order-map {
		padding: 20rpx;
		background-color: #FFFFFF;
		line-height: 40rpx;
	}

	.map-title {
		display: flex;
		justify-content: space-between;
	}

	.map-name {
		font-weight: bold;
	}

	.goods-list {
		margin-top: 20rpx;
		background-color: #FFFFFF;
		padding: 20rpx 0;
	}

	.goods-content {
		margin-top: 20rpx;
		padding: 10rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.goods-text {
		width: 360rpx;
		padding: 0 10rpx;
		font-size: 26rpx;
	}

	.goods-img {
		width: 160rpx;
		height: 160rpx;
	}

	.goods-name {
		font-size: 26rpx;
	}

	.goods-size {
		font-size: 24rpx;
	}

	.order-foot {
		height: 80rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.total-price {
		padding: 0 20rpx;
	}

	.confirm {
		color: #FFFFFF;
		background-color: #49BDFB;
		padding: 10rpx 30rpx;
	}
</style>
